import { reactControl, ReactViewState, ReactView, ReactViewControl } from "pao-aop-client";

import React from "react";

import { addon, getObject, log, Ref } from "pao-aop";
import SignFrameLayout, { InputType } from "src/business/style-components/sign-frame-layout";
import { NTOperationTable } from "src/business/components/operation-table";
import { ROUTE_PATH } from "../../app/util-tool";
import { Stencil, StencilCondition, IStencilService } from "src/models/stencil";
import { message } from "antd";

/**
 * 组件：模版管理列表视图状态
 */
export interface StencilViewState extends ReactViewState {
    /** 单品标识列表数据源 */
    data_source?: Stencil[];
    /** 当前第几页 */
    page?: number;
    /** 当前每页数 */
    pageSize?: number;
    /** 数据总条数 */
    total_data?: number;
    /** 查询条件对象 */
    condition?: StencilCondition;
    /** 滚动条 */
    loading?: boolean;
}

/**
 * 组件：模版管理列表视图
 * 控制模版管理列表视图
 */
export class StencilView extends ReactView<StencilViewControl, StencilViewState> {
    private columns_data_source = [{
        title: '模版名称',
        dataIndex: 'stencil_name',
        key: 'stencil_name',
        width: 500
    }, {
        title: '创建时间',
        dataIndex: 'create_date',
        key: 'create_date',
        width: 150,
    }];
    constructor(props: StencilViewControl) {
        super(props);
        this.state = {
            condition: {},
            page: 1,
            pageSize: 10,
            loading: false
        };
    }
    // 初始化服务
    stencilService?() {
        return getObject(this.props.stencilService_Fac!);
    }
    // 查询列表信息
    async queryList(condition: StencilCondition, page: number, count: number) {
        const data = await this.stencilService!()!.get_stencil_list!(condition, page, count)!;
        this.setState({
            total_data: data ? data!.total : 0, // 应当取接口返回的总数
            data_source: data ? data!.result : []
        });
    }
    // 删除单品详情信息
    async deleteDeatail(id: string[]) {
        const result = await this.stencilService!()!.del_stencil!(id)!;
        message.info("删除" + (result ? '成功' : '失败'));
        this.queryList({}, 1, 10)
            .then(() => { })
            .catch(error => {
                log("stencilViewControl", error.message);
            });
    }
    // 新增模版按钮方法
    private addStencil = () => {
        this.props.history!.push(ROUTE_PATH.changeStencil);
    }
    /** 分页回调事件 */
    pageOnCick = (contents: any) => {
        this.setState({
            page: contents,
            loading: true
        });
        this.queryList(this.state.condition ? this.state.condition! : {}, contents, this.state.pageSize!)
            .then(() => {
                this.setState({
                    loading: false
                });
            })
            .catch(error => {
                this.setState({
                    loading: false
                });
                log("stencilViewControl-pageOnCick", error.message);
            });
    }
    /** 自定义图标按钮回调事件 */
    onIconClick = (type: string, contents: any) => {
        if ('icon_edit' === type) {
            this.props.history!.push(ROUTE_PATH.changeStencil + `/${contents.id}`);
        }
    }
    /** 删除按钮回调事件 */
    onClickDel = (contents: any) => {
        this.setState({
            loading: true
        });
        this.deleteDeatail([contents.id])
            .then(() => {
                this.setState({
                    loading: false
                });
            })
            .catch(error => {
                this.setState({
                    loading: false
                });
                log("stencilViewControl-delete", error.message);
            });
    }
    /** 改变分页数量回调事件 */
    showSizeChange = (current: number, pageSize: number) => {
        console.log('current: ' + current + 'pageSize: ' + pageSize);
        this.setState({
            pageSize: pageSize,
            loading: true
        });
        this.queryList(this.state.condition ? this.state.condition! : {}, 1, pageSize)
            .then(() => {
                this.setState({
                    loading: false
                });
            })
            .catch(error => {
                this.setState({
                    loading: false
                });
                log("stencilViewControl-showSizeChange", error.message);
            });
    }
    // 查询回调
    private search = (e: any, val: any) => {
        this.setState({
            condition: val,
            page: 1,
            loading: true
        });
        this.queryList(val, 1, this.state.pageSize ? this.state.pageSize : 10)
            .then(() => {
                this.setState({
                    loading: false
                });
            })
            .catch(error => {
                this.setState({
                    loading: false
                });
                log("stencilViewControl", error.message);
            });
    }
    // 重置回调
    private reset = () => {
        console.log("重置回调");
        this.setState({
            condition: {}
        });
    }
    componentDidMount() {
        this.setState({
            loading: true
        });
        let condition: StencilCondition = {};
        this.queryList(condition, 1, 10)
            .then(() => {
                this.setState({
                    loading: false
                });
            })
            .catch(error => {
                this.setState({
                    loading: false
                });
                log("stencilViewControl", error.message);
            });
    }
    render() {
        let sign_frame_props = {
            loading: this.state.loading,
            edit_form_items_props: [{
                type: InputType.input,
                label: "模版名称",
                decorator_id: "handle_name",
                default_value: "",
                option: {
                    placeholder: "请输入模版名称"
                }
            }],
            btn_props: [{
                label: '新建模版',
                btn_method: this.addStencil,
                icon: 'plus'
            }],
            showTable: (
                <NTOperationTable
                    data_source={this.state.data_source}
                    columns_data_source={this.columns_data_source}
                    on_click_del={this.onClickDel}
                    // onClick={this.onRowClick}
                    on_icon_click={this.onIconClick}
                    other_label_type={[{ type: 'icon', label_key: 'icon_edit', label_parameter: { icon: 'antd@edit' } }]}
                    table_size='middle'
                    showHeader={true}
                    bordered={false}
                    total={this.state.total_data}
                    default_page_size={10}
                    total_pages={Math.ceil((this.state.total_data ? this.state.total_data : 0) / 10)}
                    show_footer={true}
                    page_on_click={this.pageOnCick}
                    show_size_change={this.showSizeChange}
                />),
            search_cb: this.search,
            reset_cb: this.reset
        };
        return (
            <SignFrameLayout {...sign_frame_props} />
        );
    }
}

/**
 * 控件：模版管理列表视图
 * 控制模版管理列表视图
 */
@addon('StencilView', '模版管理列表视图', '控制模版管理列表视图')
@reactControl(StencilView, true)
export class StencilViewControl extends ReactViewControl {
    /**
     * 模版管理服务
     */
    public stencilService_Fac?: Ref<IStencilService>;
}